<template>
  <div class="login">
    <div class="login-container">
      <div class="login-wrapper">
        <div class="left-content">
          <a-carousel class="carousel" dotsClass="carousel-dots" autoplay>
            <!-- <img v-for="(item, index) in srcList" :key="index" style="height:540px;" :src="item"> -->
            <!-- <img src="~@/assets/figure-1.jpg" style="height:540px;"/> -->
            <img src="~@/assets/figure-3.png" style="height:540px;"/>
            <img src="~@/assets/figure-5.png" style="height:540px;"/>
            <img src="~@/assets/figure-6.png" style="height:540px;"/>
            <img src="~@/assets/figure-7.png" style="height:540px;"/>
          </a-carousel>
        </div>
        <div class="right-content">
          <div v-show="!isForgetPassword">
            <div class="title">
              <img src="~@/assets/logo.png" width="35px" height="35px" class="logo" style="margin-right:10px;">{{ defaultTitles }}
            </div>
            <div class="tab-option">
              <span :class="{ 'tab-option-active' : isActve }" @click="isActve= !isActve">账号登录</span>
              <span>|</span>
              <span :class="{ 'tab-option-active' : !isActve }" @click="isActve= !isActve">手机快捷登录</span>
            </div>
            <account v-show="isActve"></account>
            <phone v-show="!isActve"></phone>
          </div>
          <forget-password v-show="isForgetPassword"></forget-password>
          <div class="tips">推荐使用<a href="https://browser.360.cn/se/" target="_blank">360浏览器极速模式</a>、<a href="https://www.google.cn/chrome/" target="_blank">谷歌浏览器</a>、<a href="http://www.firefox.com.cn/" target="_blank">火狐浏览器</a></div>
        </div>
      </div>
    </div>
    <div class="copyright">
      <p>
        <span>技术支持单位：<a href="http://www.jzsmart.com/" target="_blank">贵阳佳智软件开发有限公司</a></span>&nbsp;&nbsp;
        <span>服务电话：0851-85865358</span>&nbsp;&nbsp;
        <span>操作手册：<a :href="baseUrl + '/efiles/鑫汇资产管理信息平台快速使用手册.docx'" target="_blank">鑫汇资产管理信息平台快速使用手册</a></span>
      </p>
      <p>
        <span>APP下载地址：
          <a-popover placement="top">
            <template slot="content">
              <img src="../../assets/app.png" alt="app下载" width="100" height="100">
            </template>
            <a :href="baseUrl + '/Files/20230227/2023022712011672498822047.apk'" target="_blank">鑫汇资产管理系统APP</a>
          </a-popover>
        </span>
      </p>
      <p>© 2022-现在 遵义鑫汇资产运营有限公司 版权所有</p>
    </div>
  </div>
</template>

<script>

import ACarousel from 'ant-design-vue/lib/carousel'
import Account from './login/account'
import Phone from './login/phone'
import ForgetPassword from './login/ForgetPassword'
import 'ant-design-vue/lib/carousel/style'
import defaultSettings from '@/config/defaultSettings'
export default {
  components: {
    ForgetPassword,
    ACarousel,
    Account,
    Phone
  },
  data () {
    return {
      isActve: true,
      isForgetPassword: false,
      srcList: [],
      baseUrl: process.env.VUE_APP_API_BASE_URL,
      defaultTitles: defaultSettings.title
    }
  }
}
</script>

<style lang="less" scoped>
  .login {
    height: 100%;
    min-height: 600px;
    background: url(~@/assets/bg-2.jpg) no-repeat;
    background-size: 100% 100%;
    min-width: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .login-container {
      .login-wrapper {
        height: 540px;
        display: flex;
        .left-content {
          width: 620px;
          border-radius: 10px 0 0 10px;
          overflow: hidden;
        }
        .right-content {
          width: 380px;
          padding: 60px 40px;
          background-color: #fff;
          border-radius: 0 10px 10px 0;
          -moz-user-select:none;/*火狐*/
          -webkit-user-select:none;/*webkit浏览器*/
          -ms-user-select:none;/*IE10*/
          -khtml-user-select:none;/*早期浏览器*/
          user-select:none;
          .title {
            font-size: 20px;
            font-weight: bold;
            a {
              color: #000;
            }
          }
          .tab-option {
            margin: 30px 0;
            color: #B3B9C7;
            cursor: pointer;
            & > :nth-child(2) {
              margin: 0 10px;
            }
            .tab-option-active {
              color: #40a9ff;
            }
          }
          .tips {
            font-size: 12px;
            color: #B3B9C7;
          }
        }
      }
    }
    .copyright {
      position: relative;
      top: 7vh;
      text-align: center;
      p {
        margin-bottom: 6px;
      }
    }
  }
</style>
<style scoped>
  .ant-carousel >>> .slick-dots-bottom {
    bottom: 40px;
  }
</style>
